<template>
  <div>
    <!--头部区域-->
    <div style="display: flex;height: 70px;line-height: 70px;border-bottom: 1px solid #cccccc;">
      <div style="width: 200px;text-align: center;font-weight: bold;" class="animate__animated animate__bounce">
        远程医疗系统
      </div>
      <div style="flex: 1;background-color: #42b983;margin-top: 10px">
        <!--导航菜单-->
        <el-menu :default-active="'/front/home'" class="el-menu-demo" mode="horizontal" @select="handleSelect" router>
          <el-menu-item index="/front/home">首页</el-menu-item>
          <el-menu-item index="/front/video">视频播放</el-menu-item>
          <el-menu-item index="/front/article">文章列表</el-menu-item>
          <el-menu-item index="/front/doctor">挂号预约</el-menu-item>
          <el-menu-item index="/front/liveChat">在线就医</el-menu-item>
          <el-menu-item index="/front/videoChat">视频通话</el-menu-item>
          <el-menu-item index="/front/map">百度地图</el-menu-item>
          <el-menu-item index="/front/messageCenter">
            <el-badge :value="messageNum">
              消息中心
            </el-badge>
          </el-menu-item>
          <el-submenu index="4">
            <template slot="title">就诊记录</template>
            <el-menu-item index="/front/booking">挂号信息</el-menu-item>
            <el-menu-item index="/front/medicalRecord">个人病历</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
      <!--头像昵称-->
      <div style="width: 200px;">
        <div v-if="!user.username" style="text-align: right">
          <el-button type="primary" size="big" @click="$router.push('/login')">登录</el-button>
          <el-button type="primary" size="big" @click="$router.push('/register')">注册</el-button>
        </div>
        <div v-else>
          <el-dropdown style="cursor: pointer;text-align: right;margin-left: 15px" @command="handleCommand">
            <div style="display: inline-block">
              <img :src="user.avatar" alt="头像" style="width: 30px;border-radius: 50%;position: relative;top: 10px;right: 5px;">
              <span>{{ user.username }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
            </div>
            <el-dropdown-menu slot="dropdown" style="width: 100px;text-align: center">
              <el-dropdown-item command="person">个人中心</el-dropdown-item>
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <!--主体区域-->
    <div style="width: 1200px;height: 100%; margin: 0 auto">
      <router-view @refreshUser="getUser"/>
    </div>
  </div>
</template>

<script>
export default {
  name: "Front",
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      messageNum: "",
      pageNum: 1,
      pageSize: 5
    }
  },
  methods: {
    load() {
      this.request.get("/order/page",{
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
      }).then(res => {
        console.log(res);
        // this.tableData = res.data.records
        this.messageNum = res.data.total
      })
    },
    handleCommand(command) {
      if (command === "logout") {
        this.$store.commit("logout")
        // this.$router.push("/login")
        // localStorage.removeItem("user")
        // this.$message.success("退出成功")
      }
      if (command === "person") {
        this.$router.push("/front/person")
      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    getUser() {
      let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).username : ""
      //从后台获取user数据
      this.request.get("/user/username/" + username).then(res => {
        //重新赋值后台的最新的User数据
        this.user = res.data
      })
    }
  },
  created() {
    this.load()
  }
}
</script>

<style scoped>
.item {
  display: inline-block;
  width: 284px;
  cursor: pointer;
  text-align: center;
}
.item:hover {
  background-color: #CCCCCC;
}
</style>